import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, Dropdown } from 'antd';
import MockExam from '../exam/mockExam'
import './index.css'
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { logout } from '../../utils/loginUtils/loginMethod'
import UserInfoUpdate from '../../utils/userInfoUpdate/updateUserInfoDialog'
import LoginDialog from '../userlogin/loginDialog';
import HomePage from './homePage/index'

export default () => {
    const { Header, Content, Footer, Sider } = Layout;
    const { SubMenu } = Menu;
    const { TabPane } = Tabs;
    const [updateVisible, setUpdateVisible] = useState(false)
    const [loginDialogVisible, setLoginDialogVisible] = useState(false)
    

    //登录按钮 根据状态显示不同
    const StateButton = () => {
        const history = useHistory()
        const [stateRepeat, setSatteRepeat] = useState(0)
        const trueName = localStorage.getItem('trueName') || sessionStorage.getItem('trueName')

        //下拉选项
        const menu = (
            <Menu>
                <Menu.Item>
                    <Button type="text" onClick={() => {
                        // logout()
                        sessionStorage.clear();
                        localStorage.clear();
                        setSatteRepeat(stateRepeat + 1)
                        history.push('/user')
                    }}>注销</Button>
                </Menu.Item>
                <Menu.Item>
                    <Button type="text"><Link to='/selfCenter'>个人中心</Link></Button>
                </Menu.Item>
                <Menu.Item>
                    <Button
                        type="text"
                        onClick={() => {
                            setUpdateVisible(true)
                        }}

                    >信息修改</Button>
                </Menu.Item>
            </Menu>
        );

        if (trueName == null || true == undefined) {
            return (
                <>
                    <Button
                        type="link"
                        onClick={() => { setLoginDialogVisible(true) }}
                        danger>登录
                    </Button>
                </>
            )
        }
        else {
            return (
                <>
                    <Dropdown overlay={menu} placement="bottomLeft">
                        <Button type="link">{trueName}</Button>
                    </Dropdown>
                </>
            )
        }
    }

    return (
        <div>
            <Layout >
                <Header style={{ background: '#ffffff00', height: '35px', lineHeight: '34px' }}>
                    <Layout>
                        <Header style={{ background: '#ffffff00', height: '35px', lineHeight: '34px' }}>
                            {/* 登录注册后台入口栏 */}
                            <Space size={1000}>
                                <div></div>
                                <Space size='middle'>

                                    <StateButton />

                                    <Button
                                        type="link"
                                        danger
                                    >
                                        <Link to='/admin'>
                                            驾校后台
                                            </Link>
                                    </Button>

                                </Space>

                            </Space>

                        </Header>
                        <Content>


                            <Tabs
                                defaultActiveKey="1" size={"large"}
                                style={{ marginBottom: 16 }}
                                tabBarGutter={180}
                            >
                                <TabPane tab="首页" key="1">
                                    <HomePage/>
                                </TabPane>

                                <TabPane tab="模拟考试" key="2">
                                    <MockExam />
                                </TabPane>

                                <TabPane tab="驾校" key="3">
                                    驾校信息
                                </TabPane>

                                <TabPane tab="教练" key="4">
                                    驾校信息
                                </TabPane>
                                <TabPane tab="学车视频" key="5">
                                    驾校信息
                                </TabPane>
                                <TabPane tab="学车指南" key="6">
                                    驾校信息
                                </TabPane>

                            </Tabs>
                        </Content>
                    </Layout>
                </Header>

                <Content>

                </Content>
                <Footer />
            </Layout>
            {/*其他页面入口栏*/}
            <LoginDialog
                visible={loginDialogVisible}
                setVisible={setLoginDialogVisible}
            />
            <UserInfoUpdate
                setVisible={setUpdateVisible}
                visible={updateVisible}
            />

        </div>



    )
}


